<template>
	<view class="page-cont" :style="useTheme.theme">
		<!-- 巡检任务 -->
		<view class="task-cont">
			<view class="task-cont-top">
				<view class="task-cont-title">巡检任务</view>
				<view class="task-cont-time">
					<view :class="['task-cont-time-type', timeActive == index ? 'task-cont-time-active' : '']"
						v-for="(item, index) in timeList" :key="index" @click="timeActive = index">{{item}}
					</view>
				</view>
			</view>
			<view class="task-cont-bottom">
				<view class="task-cont-stat">
					<view :class="['task-cont-stat-item', taskActive == 0 ? 'active' : '']" @click="taskActive = 0">
						<view class="task-cont-stat-name">待处理</view>
						<view class="task-cont-stat-num">{{taskData.num1}}</view>
					</view>
				</view>
				<view class="task-cont-stat">
					<view :class="['task-cont-stat-item', taskActive == 1 ? 'active' : '']" @click="taskActive = 1">
						<view class="task-cont-stat-name">异常数</view>
						<view class="task-cont-stat-num">{{taskData.num2}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 项目信息 -->
		<view class="project-cont">
			<view class="project-list-item" v-for="(item, index) in projectList" :key="index">
				<view class="project-list-header" >
					<view class="project-list-header-left">
						<view class="project-list-header-name">{{item.name1}}</view>
						<view class="project-list-header-num">{{item.name2}}</view>
					</view>
					<view class="project-list-header-right"></view>
				</view>
				<view class="project-list-cont">
					<view class="project-list-cont-item" v-for="(childItem, childIndex) in item.childList"
						:key="childIndex" @tap="toDetail()">
						<view class="project-list-cont-top">
							<view class="project-list-cont-type">{{childItem.name3}}</view>
							<view class="project-list-cont-title">{{childItem.name4}}</view>
						</view>
						<view class="project-list-cont-detail">{{childItem.name5}}</view>
						<view class="project-list-cont-bottom">
							<view>任务时间：</view>
							<view class="project-list-cont-time">{{childItem.name6}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 报修受理、保养 -->
		<view class="repair-cont">
			<view class="repair-cont-item">
				<view class="repair-cont-item-title">报修受理</view>
				<view class="repair-cont-item-stat">
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">已完成</view>
						<view class="repair-cont-item-num">{{repairData.value1}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">未完成</view>
						<view class="repair-cont-item-num">{{repairData.value2}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">跳过</view>
						<view class="repair-cont-item-num">{{repairData.value3}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">挂起</view>
						<view class="repair-cont-item-num">{{repairData.value4}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">静默</view>
						<view class="repair-cont-item-num">{{repairData.value5}}</view>
					</view>
				</view>
			</view>
			<view class="repair-cont-item">
				<view class="repair-cont-item-title">保养</view>
				<view class="repair-cont-item-stat">
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">待处理</view>
						<view class="repair-cont-item-num">{{repairData.value6}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">待关闭</view>
						<view class="repair-cont-item-num">{{repairData.value7}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">已完成</view>
						<view class="repair-cont-item-num">{{repairData.value8}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js"
	const { pageHeight } = useNavbar();
	import useThemeStore from '@/store/theme';
	const useTheme = useThemeStore();
	const timeList = ref(["总", "日", "周", "月"]);
	const timeActive = ref(0);
	const taskActive = ref(0);
	const taskData = reactive({
		num1: 0,
		num2: 0
	});
	const projectList = reactive([{
		name1: "项目1",
		name2: "12",
		childList: [{
			name3: "日任务",
			name4: "电气设备检查V2",
			name5: "02#_冷冻系统_02#冷冻系统冷凝设备…",
			name6: "23:06:36",
		}]
	}]);
	const repairData = reactive({
		value1: 0,
		value2: 0,
		value3: 0,
		value4: 0,
		value5: 0,
		value6: 0,
		value7: 0,
		value8: 0,
	})

	const toDetail = () => {
		uni.navigateTo({
			url: '/pages/maintain/detail',
		})
	}

	onShow(() => {

	});

	onLoad(() => {

	});
</script>
<style lang="scss" scoped>
	.page-cont {
		padding: 20rpx;

		.task-cont {
			padding: 20rpx 30rpx 30rpx;
			border-radius: 10rpx;
			background-color: $theme-color;

			.task-cont-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.task-cont-title {
				color: #fff;
				font-size: 28rpx;
			}

			.task-cont-time {
				display: flex;
				align-items: center;
				border-radius: 4rpx;
				background-color: $theme-color;
				overflow: hidden;
			}

			.task-cont-time-type {
				width: 60rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				font-size: 25rpx;
				text-align: center;
			}

			.task-cont-time-active {
				color: $theme-color;
				background-color: #fff;
			}

			.task-cont-bottom {
				display: flex;
			}

			.task-cont-stat {
				padding-top: 40rpx;
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.task-cont-stat-item {
				padding: 20rpx 38rpx;
				border-radius: 5rpx;

				&.active {
					background-color: rgba(255, 255, 255, .2);
				}
			}

			.task-cont-stat-name,
			.task-cont-stat-num {
				color: #fff;
				font-size: 25rpx;
				text-align: center;
			}

			.task-cont-stat-num {
				font-size: 51rpx;
				font-weight: 600;
			}
		}

		.project-cont {
			margin-top: 10rpx;

			.project-list-item {
				padding: 2rpx;
				border-radius: 10rpx;
				background-color: #fff;
				overflow: hidden;
			}

			.project-list-header {
				padding: 12rpx 20rpx;
				display: flex;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
				background-color: #EFF1F7;
				overflow: hidden;
			}

			.project-list-header-left {
				display: flex;
				align-items: center;
			}

			.project-list-header-name {
				color: #333;
				font-size: 25rpx;
				font-weight: 600;
			}

			.project-list-header-num {
				margin-left: 20rpx;
				padding: 0 12rpx;
				height: 24rpx;
				line-height: 24rpx;
				color: #E65157;
				font-size: 22rpx;
				border-radius: 12rpx;
				background-color: rgba(230, 81, 87, 0.2);
			}

			.project-list-cont {
				padding: 20rpx;
			}

			.project-list-cont-item {
				padding: 20rpx;
				border-radius: 5rpx;
				background-color: #F7F9FF;
			}

			.project-list-cont-top {
				display: flex;
				align-items: center;
				border-radius: 4rpx;
				background-color: #EFF2FA;
			}

			.project-list-cont-type {
				width: 90rpx;
				height: 36rpx;
				line-height: 36rpx;
				color: #fff;
				font-size: 23rpx;
				text-align: center;
				border-radius: 4rpx;
				background-color: #AAB6DD;
			}

			.project-list-cont-title {
				padding: 0 20rpx;
				width: calc(100% - 90rpx);
				color: #9AACCD;
				font-size: 25rpx;
			}

			.project-list-cont-detail {
				padding-top: 14rpx;
				color: #333;
				font-size: 25rpx;
				font-weight: 600;
			}

			.project-list-cont-bottom {
				padding-top: 18rpx;
				display: flex;
				align-items: center;
				color: #999;
				font-size: 25rpx;
			}

			.project-list-cont-time {
				color: #666;
				font-weight: 600;
			}
		}

		.repair-cont {
			margin-top: 30rpx;

			.repair-cont-item {
				margin-top: 20rpx;
				padding: 20rpx 30rpx 50rpx;
				border-radius: 10rpx;
				background-color: $theme-color;

				&:first-child {
					margin-top: 0;
				}
			}

			.repair-cont-item-title {
				color: #fff;
				font-size: 28rpx;
			}

			.repair-cont-item-stat {
				padding-top: 60rpx;
				display: flex;
			}

			.repair-cont-item-box {
				flex: 1;
			}

			.repair-cont-item-name,
			.repair-cont-item-num {
				color: #fff;
				font-size: 25rpx;
				text-align: center;
			}

			.repair-cont-item-num {
				font-size: 51rpx;
				font-weight: 600;
			}
		}
	}
</style>